<template>
  <div class="qr_code_wrap" v-if="flag">
    <headTop :headClass="'transparent_header'">
      <span slot="right" @click="viewRecord">Sharing records</span>
    </headTop>
    <img :src="endShowImg" alt="" />
  </div>
</template>
<script>
export default {
  name: 'qrCode',
  data: function () {
    return {
      flag: true, // Does it show
      tempData: [], // Save user's information to judge whether there is any change.
      qrcodeImg: null, // The two-dimensional code obtained
      userId: null, // Acquired userID
      headImg: null, // Get the head
      userName: '', // User name
      endShowImg: null, // Last generated picture
      imgArr: [],
      size: [
        { // Two-dimensional code diagram
          x: 0.2667 * window.screen.width,
          y: 0.50 * window.screen.height,
          width: 0.4747 * window.screen.width,
          height: 0.4747 * window.screen.width
        },
        { // Head portrait
          x: 0.3867 * window.screen.width,
          y: 0.27 * window.screen.height,
          width: 0.2267 * window.screen.width,
          height: 0.2267 * window.screen.width
        },
        { // background
          x: 0,
          y: 0,
          width: window.screen.width,
          height: window.screen.height
        },
        { // Written words
          x: 0.56 * window.screen.width,
          y: 0.43 * window.screen.height,
          font: window.screen.height / 44
        }
      ]
    };
  },
  created () {
    this.Loading();
  },
  beforeMount: function () {
    this.getCode();
  },
  methods: {
    // Get two-dimensional code
    getCode () {
      this.axios.get('index/users/mineCode').then(({data}) => {
        if (data.status === 200) {
          this.endShowImg = data.data.pic;
          this.$store.commit('showLoading', false);
        } else {
          this.Toast(data.message);
        }
      });
    },
    // View push member
    viewRecord () {
      this.$router.push('directMember');
    }
  }
};
</script>

<style lang='scss' scoped>
.qr_code_wrap {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  img, canvas {
    width: 100%;
    height: auto;
    display: block;
  }
}
</style>
